<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table之间的关系练习</title>

    <style>
        table {
            border-collapse: collapse;
        }

        td {
            border: 1px solid black;
            padding: 10px;
        }
    </style>
</head>
<body>

<table>
    <tr>
        <td>1-1</td>
        <td>2-1</td>
        <td>3-1</td>
        <td>4-1</td>
    </tr>
    <tr>
        <td>1-2</td>
        <td>2-2</td>
        <td>3-2</td>
        <td>4-2</td>
    </tr>
    <tr>
        <td>1-3</td>
        <td>2-3</td>
        <td>3-3</td>
        <td>4-3</td>
    </tr>
    <tr>
        <td>1-4</td>
        <td>2-4</td>
        <td>3-4</td>
        <td>4-4</td>
    </tr>
</table>

<script>
    var tableEL = document.body.firstElementChild;
    for (var i = 0;i < tableEL.rows.length; i++) {
        var rowEL = tableEL.rows[i];
        var cellEL = rowEL.cells[i];
        console.log(cellEL)
        cellEL.style.background = "red"
        cellEL.style.color = "white"
    }

</script>

</body>
</html>